<template>

    <div class="user-tab">

        <el-table :data="list" style="width: 100%;" height="600" border default-expand-all row-key="auth_id"
            ref="multipleTableRef">
            <el-table-column align="center" label="权限名称" prop="auth_name" width="180" />
            <el-table-column align="center" prop="type" label="种类" width="200">
                <template #default="scope">
                    <el-tag v-if="scope.row.type == 1" type="primary" size="default">菜单</el-tag>
                    <el-tag v-else type="success" size="default">按钮</el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="path" label="路由" width="200" />
            <el-table-column align="center" label="组件缓存" width="200">
                <template #default="scope">
                    <el-switch v-model.number="scope.row.keep_alive" :active-value="1" :inactive-value="0" class="ml-2"
                        inline-prompt disabled style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                        active-text="已缓存" inactive-text="未缓存" />
                </template>
            </el-table-column>
            <el-table-column align="center" prop="mobile" label="组件路径" width="200">
                <template #default="scope">
                    <el-tag v-if="scope.row.component" type="info" size="default">{{ scope.row.component }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" fixed="right" label="操作" width="150">
                <template #default="scope">
                    <el-button type="primary" size="small" @click="editRow(scope.row)">
                        <i class="iconfont icon-bianji"></i>
                    </el-button>
                    <el-button type="danger" size="small" @click.prevent="deleteRow(scope.row.auth_id)">
                        <i class="iconfont icon-shanchu"></i>
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <el-dialog v-model="dialogVisible" title="权限编辑" :width="srceenWidth" :before-close="handleClose">
        <el-form :model="form" label-width="120px">
            <el-form-item label="权限名称" prop="auth_name" required>
                <el-input v-model="form.auth_name" placeholder="请输入权限名称" />
            </el-form-item>
            <el-form-item label="种类" prop="type">
                <el-radio-group v-model="form.type" class="ml-4">
                    <el-radio label="菜单" border :value="1" size="large"></el-radio>
                    <el-radio label="按钮" border :value="2" size="large"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item v-show="form.type == 1" label="路由路径" prop="path">
                <el-input v-model="form.path" placeholder="请输入路由路径" />
            </el-form-item>
            <el-form-item v-show="form.type == 1" label="组件缓存" prop="keep_alive">
                <el-switch v-model.number="form.keep_alive" :active-value="1" :inactive-value="0" class="ml-2"
                    inline-prompt style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                    active-text="已缓存" inactive-text="未缓存" />
            </el-form-item>
            <el-form-item v-show="form.type == 1" label="组件路径" prop="component">
                <el-input v-model="form.component" placeholder="请输入组件路径" />
            </el-form-item>
            <el-form-item label="所属权限" prop="pid">
                <el-select v-model="form.pid" placeholder="请选择所属权限">
                    <el-option label="顶级权限" :value="0" />
                    <el-option v-for="item in list" :key="item.auth_id" :label="item.auth_name" :value="item.auth_id" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">立即编辑</el-button>
                <el-button @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>


<script setup>
import { onMounted, ref, reactive } from 'vue'
import { requestIns } from '@/utils/request'


const list = ref([])
const srceenWidth = ref('50%')
onMounted(() => {
    getList()
    changeWidth()
})
window.addEventListener('resize', () => {
    changeWidth()
})
const changeWidth = () => {
    if (window.innerWidth < 1000) {
        srceenWidth.value = '90%'
    } else {
        srceenWidth.value = '50%'
    }
}
const dialogVisible = ref(false)
const form = reactive({
    auth_id: -1,
    auth_name: '',
    type: 1,
    path: '',
    component: '',
    keep_alive: 1,
    pid: 0
})
const getList = async () => {
    const res = await requestIns.request('/auth/index', 'get',)
    // console.log(res)
    if (res.state = 200) {
        list.value = res.data
    }
}

const handleClose = (done) => {
    done()
}
const deleteRow = async (id) => {


    const res = await requestIns.request('/auth/delete', 'delete', {
        auth_id: id
    })
    console.log(res)
    if (res.state === 200) {
        getList()
        ElMessage.success('删除成功')
    }
}
const editRow = (row) => {
    dialogVisible.value = true
    form.auth_id = row.auth_id
    form.auth_name = row.auth_name
    form.type = row.type
    form.path = row.path
    form.component = row.component
    form.keep_alive = row.keep_alive
    form.pid = row.auth_pid
}

const onSubmit = async () => {
    const res = await requestIns.request('/auth/update', 'put', {
        ...form
    })
    console.log(form)

    console.log(res)
    if (res.state === 200) {
        ElMessage.success(res.msg)
    } else {
        ElMessage.error(res.msg)
    }
    reset()
    dialogVisible.value = false
    getList()
}
const reset = () => {
    form.auth_name = ''
    form.type = 1
    form.path = ''
    form.component = ''
    form.keep_alive = 1
    form.pid = 0
}
</script>

<style lang="scss" scoped>
.user-tab {
    background-color: #fff;
    padding: 15px;

    .opBtn {
        margin-bottom: 15px;
    }
}

.demo-pagination-block {
    margin-top: 10px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}

.search-line {
    background-color: #fff;
    padding: 15px 0 0 15px;
    box-sizing: border-box;
    margin-bottom: 20px;
}

.switch-btn {
    margin-left: 15px;

    &:hover {
        color: #409eff;
        cursor: pointer;
    }
}
</style>